<template>
  <el-dialog
    :title="dialogProps.title"
    :visible.sync="dialogProps.visible"
    width="560px"
    @open="handleDialogOpen()"
  >
    <div slot="title" class="dialog-header">{{ dialogProps.title }}</div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="first"></el-tab-pane>
      <el-form
        :model="DietaryModel"
        :rules="formDietary"
        ref="DietaryForm"
        label-width="110px"
        label-position="right"
        size="small"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="食品名称" prop="aryName">
              <el-input
                v-model="DietaryModel.aryName"
                ref="aryName"
                autofocus
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="所属类别" prop="aryType">
              <el-select v-model="DietaryModel.aryType">
                <el-option
                  ref="aryType"
                  v-for="item in aryType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="每Kcal能量" prop="aryKilocal">
              <el-input
                v-model="DietaryModel.aryKilocal"
                ref="aryKilocal"
                autofocus
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="每KJ能量" prop="aryKilojoule">
              <el-input
                v-model="DietaryModel.aryKilojoule"
                ref="aryKilojoule"
                autofocus
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="碳水化合物含量" prop="aryCarbohy">
              <el-input
                v-model="DietaryModel.aryCarbohy"
                ref="aryCarbohy"
                autofocus
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="脂肪含量" prop="aryFat">
              <el-input
                v-model="DietaryModel.aryFat"
                ref="aryFat"
                autofocus
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="蛋白质含量" prop="aryProtein">
              <el-input
                v-model="DietaryModel.aryProtein"
                ref="aryProtein"
                autofocus
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="高血压" prop="aryBlood">
              <el-select v-model="DietaryModel.aryBlood">
                <el-option
                  ref="aryBlood"
                  v-for="item in aryBlood"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="糖尿病" prop="aryDiabetes">
              <el-select v-model="DietaryModel.aryDiabetes">
                <el-option
                  ref="aryDiabetes"
                  v-for="item in aryDiabetes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="冠心病" prop="aryCoronary">
              <el-select v-model="DietaryModel.aryCoronary">
                <el-option
                  ref="aryCoronary"
                  v-for="item in aryCoronary"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="脑卒中" prop="aryStroke">
              <el-select v-model="DietaryModel.aryStroke">
                <el-option
                  ref="aryStroke"
                  v-for="item in aryStroke"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="心脑血管疾病" prop="aryDiseases">
              <el-select v-model="DietaryModel.aryDiseases">
                <el-option
                  ref="aryDiseases"
                  v-for="item in aryDiseases"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="高血脂" prop="aryHyper">
              <el-select v-model="DietaryModel.aryHyper">
                <el-option
                  ref="aryHyper"
                  v-for="item in aryHyper"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="肥胖" prop="aryObesity">
              <el-select v-model="DietaryModel.aryObesity">
                <el-option
                  ref="aryObesity"
                  v-for="item in aryObesity"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="通风" prop="aryVentilate">
              <el-select v-model="DietaryModel.aryVentilate">
                <el-option
                  ref="aryVentilate"
                  v-for="item in aryVentilate"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="说明" prop="aryExplain">
          <el-input
            ref="aryExplain"
            type="textarea"
            resize="none"
            v-model="DietaryModel.aryExplain"
          ></el-input>
        </el-form-item>
      </el-form>
    </el-tabs>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" @click="submitForm('DietaryForm')"
        >保 存</el-button
      >
      <el-button size="small" @click="handleDialogClose()">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addDietary, DieUpdate } from "@/api/Repository/dietary";

export default {
  name: "role-edit",
  data() {
    return {
      activeName: "first",

      aryType: [
        { value: "谷薯类级杂豆", label: "谷薯类级杂豆" },
        { value: "大豆类", label: "大豆类" },
        { value: "蔬菜类", label: "蔬菜类" },
        { value: "水果类", label: "水果类" },
        { value: "坚果、种子类", label: "坚果、种子类" },
        { value: "畜肉禽肉鱼虾蟹贝类", label: "畜肉禽肉鱼虾蟹贝类" },
        { value: "奶类", label: "奶类" },
        { value: "蛋类", label: "蛋类" }
      ],

      aryBlood: [
        { value: "是", label: "是" },
        { value: "否", label: "否" }
      ],

      aryDiabetes: [
        { value: "是", label: "是" },
        { value: "否", label: "否" }
      ],

      aryCoronary: [
        { value: "是", label: "是" },
        { value: "否", label: "否" }
      ],

      aryStroke: [
        { value: "是", label: "是" },
        { value: "否", label: "否" }
      ],

      aryDiseases: [
        { value: "是", label: "是" },
        { value: "否", label: "否" }
      ],

      aryHyper: [
        { value: "是", label: "是" },
        { value: "否", label: "否" }
      ],

      aryObesity: [
        { value: "是", label: "是" },
        { value: "否", label: "否" }
      ],

      aryVentilate: [
        { value: "是", label: "是" },
        { value: "否", label: "否" }
      ],

      DietaryModel: [
        {
          id: "",
          aryName: "",
          aryType: "",
          aryKilocal: "",
          aryKilojoule: "",
          aryCarbohy: "",
          aryProtein: "",
          aryFat: "",
          aryBlood: "",
          aryDiabetes: "",
          aryCoronary: "",
          aryStroke: "",
          aryDiseases: "",
          aryHyper: "",
          aryObesity: "",
          aryVentilate: "",
          aryExplain: ""
        }
      ],

      //加载
      locked: false,

      dialogProps: {
        visible: false,
        action: "",
        title: ""
      },
      formDietary: {
        aryName: [
          { required: true, message: "请输入食品名称", trigger: "blur" }
        ],
        aryType: [{ required: true, message: "请选择类别", trigger: "change" }],
        aryKilocal: [
          { required: true, message: "请输入KCal能量", trigger: "blur" }
        ],
        aryKilojoule: [
          { required: true, message: "请输入KJ能量", trigger: "blur" }
        ],
        aryCarbohy: [
          { required: true, message: "请输入碳水化合物含量", trigger: "blur" }
        ],
        aryFat: [
          { required: true, message: "请输入脂肪含量", trigger: "blur" }
        ],
        aryProtein: [
          { required: true, message: "请输入蛋白质含量", trigger: "blur" }
        ]
        // aryExplain: [
        //   { required: true, message: "请输入说明", trigger: "blur" }
        // ],

        // aryBlood: [
        //   { required: true, message: "请选择是否有高血压", trigger: "change" }
        // ],
        // aryDiabetes: [
        //   { required: true, message: "请选择是否有糖尿病", trigger: "change" }
        // ],
        // aryCoronary: [
        //   { required: true, message: "请选择是否有冠心病", trigger: "change" }
        // ],
        // aryStroke: [
        //   { required: true, message: "请选择是否有脑卒中", trigger: "change" }
        // ],
        // aryDiseases: [
        //   {
        //     required: true,
        //     message: "请选择是否有心脑血管疾病",
        //     trigger: "change"
        //   }
        // ],
        // aryHyper: [
        //   { required: true, message: "请选择是否有高血脂", trigger: "change" }
        // ],
        // aryObesity: [
        //   { required: true, message: "请选择是否有肥胖", trigger: "change" }
        // ],
        // aryVentilate: [
        //   { required: true, message: "请选择是否有通风", trigger: "change" }
        // ]
      }
    };
  },
  methods: {
    //选项卡点击
    handleClick(tab, event) {
      console.log(tab, event);
    },

    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.dialogProps.action === "add") {
            this.doSaveDietary();
          } else {
            this.doUpdateDietary();
          }
        } else {
          return false;
        }
      });
    },
    doUpdateDietary() {
      DieUpdate(this.DietaryModel)
        .then(response => {
          this.dialogProps.visible = false;
          if (response.data > 0) {
            this.$emit("save-finished");
            this.$message({
              message: "修改成功",
              type: "success"
            });
          }
        })
        .catch(error => {
          this.$message.error("修改失败");
        });
    },
    doSaveDietary() {
      addDietary(this.DietaryModel)
        .then(response => {
          this.locked = false;
          this.dialogProps.visible = false;
          if (response.data > 0) {
            this.$emit("save-finished");
            this.$message({
              message: "添加成功",
              type: "success"
            });
          }
        })
        .catch(error => {
          this.$message.error("添加失败");
        });
    },

    handleDialogClose() {
      this.dialogProps.visible = false;
    },

    handleDialogOpen() {
      this.$nextTick(() => {
        this.$refs["DietaryForm"].clearValidate();
        this.$refs["aryName"].focus();
      });
    },

    outputError(error) {
      console.log(error.response ? error.response : error.message);
      this.$message({
        showClose: true,
        message: "出错了，请按F12查看浏览器日志。",
        type: "error"
      });
    }
  },
  mounted: function() {
    this.$nextTick(() => {
      this.$on("openEditDietaryDialog", function(eModel) {
        this.DietaryModel = eModel;
        this.dialogProps.action = "edit";
        this.dialogProps.title = "编辑";
        this.dialogProps.visible = true;
      });
      this.$on("openAddDietaryDialog", function() {
        this.dialogProps.action = "add";
        this.dialogProps.title = "新增";
        this.DietaryModel = {};
        this.dialogProps.visible = true;
      });
    });
  }
};
</script>

